<template>
  <div class="grid-container" v-if="true">
    <div class="grid-item" v-for="(item, index) in list" :key="index" :style="'height:' + item.h + 'px'">{{ index }}</div>
  </div>
  <div class="grid-container-column">
    <div class="grid-item" v-for="(item, index) in list" :key="index" :style="'width:' + item.w + 'px'">{{ index }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      a: 1,
      b: 2,
      list: []
    }
  },
  computed: {},
  methods: {
    add() {}
  },
  mounted() {
    let list = []
    for (var i = 0; i < 20; i++) {
      list.push({
        index: i,
        h: Math.random() * 100 + 100,
        w: Math.random() * 30 + 30
      })
    }
    this.list = list

    function setRow() {
      // 获取el实例
      let itemList = document.querySelectorAll('.grid-container .grid-item')
      for (let el of itemList) {
        let rows = Math.ceil(el.clientHeight) + 10 // el高除以一个默认网格行高+1个间隔防止贴在一起
        el.style.gridRowEnd = 'span ' + rows
      }
    }

    function setColumn() {
      // 获取el实例
      let itemList = document.querySelectorAll('.grid-container-column .grid-item')
      for (let el of itemList) {
        let columns = Math.ceil(el.clientWidth) + 10 // el高除以一个默认网格行高+1个间隔防止贴在一起
        el.style.gridColumnEnd = 'span ' + columns
      }
    }

    this.$nextTick((res) => {
      setRow()
      setColumn()
    })
  }
}
</script>
<style type="text/css">
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  background-color: #2196f3;
  padding: 10px;
  grid-auto-rows: 1px;
  align-items: start;
  grid-column-gap: 8px;
  overflow: hidden auto;
}
.grid-container-column {
  width: max-content;
  display: grid;
  //grid-template-rows: repeat(2, 100px);
  grid-template-rows: repeat(auto-fill, minmax(180px, 1fr));
  background-color: #2196f3;
  padding: 10px;
  grid-auto-columns: 1px;
  align-items: start;
  grid-row-gap: 8px;
  overflow: hidden auto;
  /*这边列无限先要满足列的要求，也就是行数先要满足，纵向本来就是无限高度，无法处理*/
  grid-auto-flow: column;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
}
</style>
